<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>二次分享监控</title>
    <#include "/header.html">

    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/chart.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/stats.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/layui/css/layui.css">
    <link href="${request.contextPath}/statics/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/chartStyle.css">
    <script src="${request.contextPath}/statics/plugins/layui/layui.js"></script>
</head>

<body>
<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
<script src="${request.contextPath}/statics/plugins/jqgrid/grid.locale-cn.js"></script>
<script src="${request.contextPath}/statics/plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="${request.contextPath}/statics/plugins/ztree/jquery.ztree.all.min.js"></script>
<script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
<script src="${request.contextPath}/statics/js/common.js"></script>
<script src="${request.contextPath}/statics/js/transData.js"></script>
<script src="${request.contextPath}/statics/js/echarts.min.js"></script>
<style>

    .glyphicon-arrow-up{
        color: red;
    }

    .glyphicon-arrow-down{
        color: #76d471;
    }
    #refreshs{
        position:fixed;
        top: 200px;

        width: 220px;
        border: 1px solid #cccccc;
        border-right: none;
        border-radius:5px 0 0 5px;
        background: #ffffff;
        padding: 10px 5px;
        z-index: 999;
    }
    .arrows{
        position: absolute;
        left: -41px;
        top: 4px;
        width: 40px;
        height: 40px;
        line-height:40px;
        text-align: center;
        border: 1px solid #ffffff;
        background: #62a6f5;
        cursor: pointer;
    }
    .refreshss{
        cursor: pointer;
        background: #62a6f5;
        position: absolute;
        left: -41px;
        top: 44px;
        width: 40px;
        height: 40px;
        line-height:40px;
        text-align: center;
        border: 1px solid #ffffff;
    }
</style>
<div id="refreshs" style="right:0px;">
    <div class="arrows"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-arrow-right"></span></div>
    <div class="refreshss" onclick="netrafficPage.refresh()"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-refresh"></span></div>
    <form class="layui-form" action="">
        <div class="row" style="margin-bottom: 10px;border-top:none;padding: 20px 2px 0px 2px; ">
            <div class="col-md-10 col-md-offset-1" >
                <input type="text" class="layui-input" placeholder="请选择时间" autocomplete="off" id="date">
            </div>
        </div>
        <!--<span class="glyphicon glyphicon-refresh" style="font-size: 30px;"></span>-->
    </form>
</div>
<div class="panel panel-default container-fluid">
    <div class="row chartsBox">
        <div class="col-md-12 chartCon">
            <div id="allPlatfrom" class="chartStyle"></div>
            <div class="chartText">
                <i class="tipLogo yesterdayStyle1" data-toggle="tooltip" data-placement="top" title="昨日此时总计">
                    昨
                </i>
                <span class="valColor yCurrentTotal yesterdayStyle2">暂无</span>
                <i class="tipLogo todayStyle1" data-toggle="tooltip" data-placement="top" title="今日此时总计">
                    今
                </i>
                <span class="valColor tCurrentTotal todayStyle2">暂无</span>
                <i class="tipLogo totalStyle1" data-toggle="tooltip" data-placement="top" title="昨日总计">
                    总
                </i>
                <span class="valColor yTotal totalStyle2">暂无</span>
                <#if shiro.hasPermission("secondShareCharts:allSecondShare:exportExcel")>
                <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
            </#if>
        </div>
    </div>
</div>
<div id="chartAll"></div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        netrafficPage.init();
        netrafficPage.fixedBox();
    });
    var ipLoading = false;
    var _date = "";
    var startTimes = gettime(1);
    var  endTimes = gettime(0);
    function gettime(num){
        var _thisdate =new Date() - (1000*60 *60 *24*num)
        var date = new Date(_thisdate);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }
    function setParams() {
        if(_date){
            console.log(_date);
            var selectTime = _date.split(' - ');
            startTimes = selectTime[0];
            endTimes = selectTime[1];
        }else{
            startTimes = gettime(1);
            endTimes = gettime(0);
        }
        var params = {
            beforeTime:startTimes,
            afterTime:endTimes
        };
        var minData;
        var maxData;
        if(params.startDate>params.endDate){
            maxData = params.startDate;
            minData = params.endDate;
            params.endDate = maxData;
            params.startDate = minData;
        }
        return params;
    }
    var netrafficPage = {
        init:function () {
            var _this = this;
            _this.showChart();
            _this.showToptip();
            _this.getIp();
        },
        refresh:function () {
            var _this = this;
            $("#chartAll").find(".chartsBox").remove();
            _this.getIp();
        },
        getIp:function () {
            // var index = layer.msg('加载中', {
            //       icon: 16
            //       ,shade: 0.01
            //   });
            var _this = this;
            var data = setParams();
            ajaxc({
                type: "POST",
                permit:"secondShareCharts:allCharts:chartsShow",
                url: baseURL+"ip/findSecondSharedFlowFlowMonitor",
                data: JSON.stringify(data),
                contentType : "application/json",
                success: function(result){
                    ipLoading = false;
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        ipDetail = result.data;
                        _this.allPlatfromIp(startTimes,endTimes);
                        _this.appendChartRoot(startTimes,endTimes);
                        //layer.close(index)
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });

        },
        fixedBox:function () {
            var _this = this;
            $('.arrows').click(function(){
                if($('#refreshs').css('right')=='0px'){
                    $('.arrows span').removeClass('glyphicon-arrow-right').addClass('glyphicon-arrow-left');
                    $('#refreshs').animate({
                        right:'-220px'
                    })
                }else{
                    $('.arrows span').removeClass('glyphicon-arrow-left').addClass('glyphicon-arrow-right');
                    $('#refreshs').animate({
                        right:'0px'
                    })
                }

            });
            layui.use(['form','laydate'], function() {
                var form = layui.form;
                var laydate = layui.laydate;
                laydate.render({
                    elem: '#date',
                    position: 'fixed',
                    range: true,
                    done: function (value, date, endDate) {
                        _date = value;
                        _this.refresh();
                    }
                });
            });
            $('#date').val(gettime(1)+' - '+gettime(0));
        },
        showToptip:function () {
            $('[data-toggle="tooltip"]').tooltip();
        },
        setHours:function () {
            var hours = [];
            for (let i=0;i<24;i++){
                if(i<10){
                    hours.push(0 + '' + i + ':00');
                }else{
                    hours.push(i + ':00');
                }

            };
            //console.log(hours);
            return hours;
        },
        showChart:function () {
            var _this = this;
            _this.chartOpt("allPlatfrom","所有平台");
        },
        chartOpt:function (id,title) {
            var _this = this;
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(id));
            // console.log(myChart)
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: title + 'IP总量'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                color:['#2ec770','#1c97f5'],
                legend: {
                    data:['昨日','今日'],
                    left: '50%'
                },
                grid: {
                    left: '40px',
                    right: '4%',
                    top:'80px',
                    bottom:'3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {

                    type: 'category',
                    boundaryGap: false,
                    name:'时间',
                    nameLocation:'start',
                    axisLabel: {
                        showMaxLabel: true
                    },
                    data:_this.setHours()
                },
                yAxis: {
                    type: 'value',
                    name:'数量'
                },
                series: [
                    {
                        name:'昨日',
                        type:'line',
                        lineStyle:{
                            color:'#2ec770'
                        },
                        smooth: true,
                        data:[]
                    },
                    {
                        name:'今日',
                        type:'line',
                        areaStyle: {},
                        lineStyle:{
                            color:'#1c97f5'
                        },
                        smooth: true,
                        data:[]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option,true);

        },
        commonOption:function (id,title,seriesData,b,a) {
            var _this = this;
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(id));
            // console.log(myChart)
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: title + '二次分享'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter:function (params) {
                        //console.log(params,'22222');
                        var data;
                        var html = '<span style="color: #FFFFFF">'+params[0].axisValueLabel+'</span><br />';
                        var perHtml = '';
                        if(params.length > 1){
                            data = calPercent(params[1].value,params[0].value);
                            if(data.perType == 1){
                                perHtml = '<i class="fa fa-long-arrow-up" style="color: red;margin-right: 3px"></i><span style="color: red;">'+data.percent+'</span>';
                            }else if(data.perType == 2){
                                perHtml = '<i class="fa fa-long-arrow-down" style="color: #2ec770;margin-right: 3px"></i><span style="color: #2ec770;">'+data.percent+'</span>';
                            }

                        }
                        params.map(function (item) {
                            if(item.seriesName == a){
                                html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>' + item.seriesName + '日 : ' + addSplit(item.value) + '&nbsp;&nbsp;&nbsp;'+ perHtml;
                            }else{
                                html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>' + item.seriesName + '日 : ' + addSplit(item.value) + '<br/>';
                            }
                        });
                        return html;
                    },
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985',
                            formatter:function (params) {
                                return parseFloat(params.value).toFixed(0)
                            }
                        }
                    }
                },
                color:['#2ec770','#1c97f5'],
                legend: {
                    data:[b,a],
                    left: '50%'
                },
                grid: {
                    left: '40px',
                    right: '4%',
                    top:'90px',
                    bottom:'3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    name:'时间',
                    nameLocation:'start',
                    axisLabel: {
                        showMaxLabel: true
                    },
                    axisPointer:{
                        label:{
                            formatter:function (params) {
                                // console.log(params.value);
                                var val  = params.value;
                                return params.value + " ~ " + params.value.split(":")[0] + ":59";
                            }
                        }
                    },
                    data:ipDetail.xaxis
                },
                yAxis: {
                    type: 'value',
                    name:'数量'
                },
                series: [
                    {
                        name:b,
                        type:'line',
                        lineStyle:{
                            color:'#2ec770'
                        },
                        smooth: true,
                        data:seriesData.yesterdayCount
                    },
                    {
                        name:a,
                        type:'line',
                        areaStyle: {},
                        lineStyle:{
                            color:'#1c97f5'
                        },
                        smooth: true,
                        data:seriesData.todayCount
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option,true);

        },
        allPlatfromIp:function (b,a) {
            var _this = this;
            _this.commonOption("allPlatfrom","所有平台",ipDetail.totalIp,b,a);
            $("#allPlatfrom").siblings(".chartText").find(".tCurrentTotal").text(transData(ipDetail.totalIp.todayNowCount));
            $("#allPlatfrom").siblings(".chartText").find(".yCurrentTotal").text(transData(ipDetail.totalIp.yesterDayNowCount));
            $("#allPlatfrom").siblings(".chartText").find(".yTotal").text(transData(ipDetail.totalIp.yesterDayTotalCount));

            $("#allPlatfrom").siblings(".chartText").find(".yesterdayStyle1").text(b).attr('data-original-title',b+' 日此时总计 '+ ipDetail.totalIp.yesterDayTotalCount);
            $("#allPlatfrom").siblings(".chartText").find(".todayStyle1").text(a).attr('data-original-title',a+' 日此时总计 '+ipDetail.totalIp.todayNowCount);
            $("#allPlatfrom").siblings(".chartText").find(".totalStyle1").text(b).attr('data-original-title',b+' 日总计 '+ ipDetail.totalIp.yesterDayNowCount);
        },
        appendChartRoot:function (b,a) {
            var _this = this;
            var _html = '';
            var allData =  _this.split_array(ipDetail.platformIp,2);
            for(var i = 0;i<allData.length;i++){
                var col = '';
                for(var j = 0;j<allData[i].length;j++){
                    col = col+ '<div class="col-md-6 chartCon"><div id="'+allData[i][j].platformId+'" class="chartStyle"></div><div class="chartText">';
                    col = col + '<i class="tipLogo yesterdayStyle1" data-toggle="tooltip" data-placement="top" title="'+b+' 日此时总计 '+allData[i][j].yesterDayNowCount+'">';
                    col = col + b + '</i><span class="valColor yCurrentTotal yesterdayStyle2">'+transData(allData[i][j].yesterDayNowCount)+'</span>';
                    col = col + ' <i class="tipLogo todayStyle1" data-toggle="tooltip" data-placement="top" title="'+a+' 日此时总计 '+allData[i][j].todayNowCount+'">'+a+'</i>';
                    col = col + '<span class="valColor tCurrentTotal todayStyle2">'+transData(allData[i][j].todayNowCount)+'</span>';
                    col = col + '<i class="tipLogo totalStyle1" data-toggle="tooltip" data-placement="top" title="'+b+' 日总计 '+allData[i][j].yesterDayTotalCount+'">'+b+'</i>';
                    col = col + ' <span class="valColor yTotal totalStyle2">'+transData(allData[i][j].yesterDayTotalCount)+'</span>';
                    col = isAuth("secondShareCharts:allCharts:chartsShow")?col + '<span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>':col + '';
                    col = col + '</div></div>';
                }
                _html  = _html+ '<div class="row chartsBox">'+ col + '</div>';
            };
            $("#chartAll").append(_html);
            for(var i = 0;i<allData.length;i++){
                for(var j = 0;j<allData[i].length;j++){
                    _this.commonOption(allData[i][j].platformId,allData[i][j].nickName,allData[i][j],b,a)
                }
            };
            _this.showToptip();
        },
        split_array: function (arr, len){
            var a_len = arr.length;
            var result = [];
            for(var i=0;i<a_len;i+=len){
                result.push(arr.slice(i,i+len));
            }
            return result;
        }
    }
</script>
</html>